<template>
    <div id="main">
        <h3>我的粉丝 (<span>{{ followers.length }}</span>)</h3>
        <hr>
        <ul v-if="followers.length">
            <li v-for="follower in followers" > <router-link :to="{ name: 'user', params: { id: follower.id } , query:{name:'查看详情',flag:'true'}}">{{follower.attributes.username  }}</router-link></li>
        </ul>
        <span v-else>你没有粉丝</span>
    </div>
</template>

<script>
    import { mapState } from 'vuex';
    import { Toast } from 'mint-ui';
    export default {

        name: 'myFollower',

        data () {
            return {
                followers: []
            };
        },
        computed: mapState(['user']),
        created(){
            this.getFollower();
        },
        methods:{
            getFollower(){
                const q = this.user.followerQuery();
                q.include('follower');
                q.find().then((followers) => {
                    this.followers = followers;
                }).catch(console.log);
            }
        }


    };
</script>

<style lang="css" scoped>
    #main h3{
        margin-left: 10px;
        margin-bottom: 15px;
    }

    #main h3 span{
        color: #41b883;
    }

    #main hr{
        width: 95%;
        margin: 5px auto;
    }

    #main ul{
        margin-left: 10px;
    }

    #main ul li{
        font-size: 18px;
        line-height: 30px;
    }

    #main>span{
        margin-left: 10px;
    }
</style>